<template>
  <div class="pages fullreductiondetails" id="app">
    <div class="pageLevel">
      <!-- 操作框   -->
      <div class="operationBox tableSearch">
        <el-button type="primary" size="mini" @click="goBack()">返回</el-button>
        <!-- <el-button type="primary" v-if="showTab == '1'" @click="edit()" size="mini">修改</el-button> -->
      </div>
    </div>
    <div class="content">
      <div class="from_main infon">
        <div class="infon_text">
          <span class="infon_shu"></span>
          <span class="infon_text_t">基本信息</span>
        </div>
      </div>
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <div class="content-form">
          <el-form-item label="优惠券标题:" prop="name">
            <div>{{ruleForm.ticketName}}</div>
          </el-form-item>
          <el-form-item label="优惠券副标题:" prop="region">
            <div>{{ruleForm.ticketSubName}}</div>
          </el-form-item>
          <el-form-item label="优惠类型">
            <div>体验券</div>
          </el-form-item>
          <el-form-item label="体验券金额" prop="rate">
            <div>{{ruleForm.ticketAmount}}</div>
          </el-form-item>
          <el-form-item label="有效期" prop="radios">
            <el-col :span="11" style=" float: none;">
              <el-form-item prop="validDay" class="Receive">
                <el-radio
                  :disabled="details"
                  v-model="ruleForm.radios"
                  @change="validTill"
                  label="0"
                >
                  <span>领取后&nbsp;&nbsp;</span>
                  <el-input
                    :disabled="ruleForm.adate ||details"
                    style="width: 100px;height: 60px;"
                    class="inp-qw-price"
                    size="small"
                    v-model="ruleForm.validDay"
                    maxlength="8"
                  />
                  <span>&nbsp;&nbsp;天内有效</span>
                </el-radio>
              </el-form-item>
            </el-col>
            <!-- <el-col class="line" :span="2">-</el-col> -->
            <el-col :span="11">
              <div class="block">
                <el-radio
                  :disabled="details"
                  v-model="ruleForm.radios"
                  @change="validTill"
                  label="1"
                >
                  <el-date-picker
                    :disabled="!ruleForm.adate || details"
                    v-model="ruleForm.value6"
                    type="daterange"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-radio>
              </div>
            </el-col>
            <div class="content-span">提示：选择第二种时，活动开始时间 >= (早于等于) 券的开始时间 且 活动结束时间 >= 券结束时间</div>
          </el-form-item>
        </div>

        <div class="from_main infon">
          <div class="infon_text">
            <span class="infon_shu"></span>
            <span class="infon_text_t">发放使用</span>
          </div>
        </div>
        <div class="content-form1">
          <el-form-item label="门店范围">
            <el-table max-height="250" :data="ruleForm.shopList" style="width: 70%;">
              <el-table-column prop="name" align="center" label="门店名称"></el-table-column>
              <el-table-column prop="shopType" align="center" label="类型" :formatter="shopType"></el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item label="适用服务">
            <el-col :span="18">
              <el-table :data="ruleForm.serviceList[0].list" border style="width: 100%">
                <el-table-column prop="name" align="center" label="服务名称"></el-table-column>
                <el-table-column prop="serviceTime" align="center" label="时长(分)"></el-table-column>
                <el-table-column prop="price" align="center" label="价格(元)"></el-table-column>
              </el-table>
            </el-col>
          </el-form-item>
        </div>
        <div class="from_main infon">
          <div class="infon_text">
            <span class="infon_shu"></span>
            <span class="infon_text_t">券面信息</span>
          </div>
        </div>
        <div class="content-form">
          <el-form-item label="优惠说明: " prop="explain">
            <el-input
              :disabled="details"
              type="textarea"
              :autosize="{ minRows: 6, maxRows: 4}"
              v-model="ruleForm.explain"
              placeholder="例如：满100元，减10元，部分商品可用，全部门店适用"
            ></el-input>
            <span class="wordNumber">{{ruleForm.explain.length}}/200</span>
          </el-form-item>
          <el-form-item label="使用须知: ">
            <el-input
              :disabled="details"
              type="textarea"
              v-model="ruleForm.use"
              :autosize="{ minRows: 8, maxRows: 4}"
              placeholder="请说明使用限制如：参与门店（全部门店/指定门店/某区域门店）；参与商品（全部/品类/品牌）"
            ></el-input>
            <span class="wordNumber">{{ruleForm.use.length}}/2000</span>
          </el-form-item>
        </div>
        <div class="content-span"></div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from "@/util";
import sdInput from "@/components/SdInput";
import state from "@/util/state";
import {
  getMarketTicketDetail,
  getGoodsClassifyTreeList,
  getGoodsLabelListByShopId
  //   findGoodsFirstClassifyList,
  //   findBrandList
} from "@/api";

export default {
  computed: {
    ...mapState({
      merchantId: state => state.merchantId,
      userInfo: state => state.userInfo,
      pageLevel: state => state.pageLevel,
      path: state => state.path
    })
  },
  components: {
    sdInput
  },
  data() {
    return {
      shopType: state.shopType, //门店类型
      //   states: states,
      id: "",
      saleStatusArray: [],
      commodityBrandList: [],
      commodityClassification: "",
      commodBrand: "",
      showTab: "",
      details: true, //详情
      LabelListt: [], //商品品牌
      commodityCategoryfunList: [], //商品分类数组

      props: { multiple: true, emitPath: false },
      propsbrand: {
        multiple: true,
        label: "name",
        value: "id",
        emitPath: false
      },

      ruleForm: {
        ticketType: 0,
        adate: false,
        value6: [],
        name: "",
        rate: "",
        rate1: "",
        region: "",
        radios: "0",
        commod: "",
        commodAdd: false,
        serve: "",
        serveAdd: false,
        card: "",
        cardAdd: false,
        explain: "",
        validDay: "",
        use: "",
        goodsList: [
          {
            joinType: null,
            isUse: "",
            brandIds: null,
            typeIds: null,
            list: null
          }
        ],
        serviceList: [{ joinType: null, isUse: "", list: null }],
        cardList: [{ joinType: null, list: null }],
        shopList: []
      }
    };
  },
  created() {
    this.showTab = util.getQuery().showTab;
    this.id = util.getQuery().id;
  },
  mounted() {
    this.Detail();
    this.commodityCategoryfun();
    this.commodityBrand();
  },
  methods: {
    Detail() {
      let datas = {
        id: this.id
      };
      getMarketTicketDetail(datas).then(res => {
        let Data = res.data;
        res.data.rate1 = Data.ticketAmount;
        res.data.rate = Data.limitAmount;
        res.data.radios = Data.validType.toString();
        res.data.validDay = Data.validDay;
        res.data.goodsList[0].joinBoolean =
          Data.goodsList[0].isUse == 0
            ? false
            : Data.goodsList[0].isUse == 1
            ? true
            : "";
        res.data.serviceList[0].joinBoolean =
          Data.serviceList[0].isUse == 0
            ? false
            : Data.serviceList[0].isUse == 1
            ? true
            : "";
        res.data.explain = Data.ticketDesc;
        res.data.use = Data.useInstructions;
        this.ruleForm = res.data;
         if (Data.startDate != null) {
          this.ruleForm.value6 = [
          util.foryear(Data.startDate),
          util.foryear(Data.endDate)
        ];
        }
        // this.ruleForm.value6 = [
        //   util.foryear(Data.startDate),
        //   util.foryear(Data.endDate)
        // ];
        this.validTill(); //有效期
      });
    },
    validTill() {
      if (this.ruleForm.radios == "0") {
        this.$delete(this.ruleForm, "adate");
        this.$set(this.ruleForm, "adate", false);
        this.$set(this.ruleForm, "value6", []);
      } else {
        this.$delete(this.ruleForm, "adate");
        this.$set(this.ruleForm, "adate", true);
        this.$set(this.ruleForm, "validDay", "");
      }
    },
    // 返回按钮
    goBack() {
      history.back();
    },
    // 商品品类
    commodityCategoryfun() {
      getGoodsClassifyTreeList().then(res => {
        let allClassifyTreeList = [
          {
            value: "",
            label: "全部",
            children: res.data
          }
        ];
        this.commodityCategoryfunList = allClassifyTreeList;
      });
    },
    // 商品品牌
    commodityBrand() {
      getGoodsLabelListByShopId({
        labelType: "0",
        shopId: this.merchantId
      }).then(res => {
        let allLabelListt = [
          {
            value: "",
            label: "全部",
            children: res.data.list,
            name: "全部"
          }
        ];
        this.LabelListt = allLabelListt;
      });
    }
  }
};
</script>
<style scoped>
#app {
  text-align: left;
}
.content {
  margin-left: 30px;
}
.content-form {
  width: 500px;
}
.content-form1 {
  width: 1000px;
}
.mjje {
  width: 500px;
  height: 60px;
  line-height: 60px;
  text-indent: 10px;
}
.mjje span {
  margin-left: 10px;
}
.mjje .el-input-group__append {
  width: 5px;
  padding: 0;
}
.tail {
  width: 800px;
  margin: 100px auto;
}
.tail .el-form-item {
  margin-left: 450px;
}
.content-span {
  margin-top: 60px;
  width: 700px;
  color: #c0c4cc;
}
.content-span1 {
  margin: 30px 0 30px 200px;
  color: #c0c4cc;
}
.tableSearchs {
  position: relative;
}
.tableSearchs .el-input__icon {
  position: absolute;
  top: 12px;
  left: 190px;
  z-index: 10;
  width: 25px;
  height: 35px;
}
.wordNumber {
  position: absolute;
  bottom: 0px;
  left: 348px;
  font-weight: normal;
  color: #ccc;
  font-size: 12px;
}
</style>
<style>
.Receive .el-form-item__error {
  top: 38px;
}
</style>

